<template>
	<div class="showBuy">
		<v-header></v-header>
		<div class="tabs-show-bar">
			<div class="tabs-show-bar-nav">
				<div class="tabs-show-tab" v-for="(item,index) in showTabsParam" :class="[showIndex == index ? 'tabs-show-active' : '']" @click="showToggleTabs(index)">
					{{item.name}}
				</div>
			</div>
		</div>
		<div class="tabs-show-content">
			<div class="divShowTab" v-show="showIndex===0">
				<div class="price-title">
					<p>当前价格</p><p style="color: #F33D2F;">&emsp;￥{{currentPrice}}&nbsp;CNY</p>
				</div>
				<mt-field label="" placeholder="买入量KBC" type="number" v-model="buyNum" v-on:input="buyKBC"></mt-field>
				<mt-field label="" placeholder="输入买入单价" type="number" v-model="buyUnit" v-on:input="buyKBC"></mt-field>
				<mt-field label="" placeholder="请输入验证码" v-model="verifyCode">
					<span v-if="sendMsgDisabled" class="code-get">{{time + '秒后获取'}}</span>
					<span v-if="!sendMsgDisabled" class="code" @click="send('buy')">获取验证码</span>
				</mt-field>
				<div class="price-title">
					<span>交易额</span><span style="color: #F33D2F;text-align: right;">&emsp;{{tradeBuy}}&nbsp;CNY</span>
				</div>
				<div class="button-box">
					<mt-button type="danger" size="large" @click.native="submitBuy">买入KBC</mt-button>
				</div>
			</div>
			<div class="divShowTab" v-show="showIndex===1">
				<div class="price-title">
					<p>当前KBC量</p><p style="color: #30B04E;">&emsp;{{currentKbcPrice}}&nbsp;KBC</p>
				</div>
				<mt-field label="" placeholder="卖出量KBC" type="number" v-model="sellNum" v-on:input="sellKBC"></mt-field>
				<mt-field label="" placeholder="输入卖出单价" type="number" v-model="sellUnit" v-on:input="sellKBC"></mt-field>
				<mt-field label="" placeholder="请输入验证码" v-model="verifyCode">
					<span v-if="sendMsgDisabled" class="code-get">{{time + '秒后获取'}}</span>
					<span v-if="!sendMsgDisabled" class="code" @click="send('sell')">获取验证码</span>
				</mt-field>
				<div class="price-title">
					<span>交易额</span><span style="color: #30B04E;text-align: right;">&emsp;{{tradeSell}}&nbsp;CNY</span>
				</div>
				<div class="button-box">
					<mt-button type="primary" size="large" @click.native="submitSell">卖出KBC</mt-button>
				</div>
			</div>
			<div class="divShowTab" v-show="showIndex===2">
				<ul class="table-box">
					<li v-if="isShow">
						<div class="no-data">
							暂无数据！
						</div>
					</li>
					<li v-if="buyEntityList!=''" v-for="item in buyEntityList">
						<span style="color: #F33D2F;">买</span>
						<span>￥{{item.kbcPrice}}</span>
						<span>{{item.kbcNum}}</span>
					</li>
					<li v-if="sellEntityList!=''" v-for="item in sellEntityList">
						<span style="color: #30B04E;">卖</span>
						<span>￥{{item.kbcPrice}}</span>
						<span>{{item.kbcNum}}</span>
					</li>
				</ul>
			</div>
			<div class="divShowTab" v-show="showIndex===3">
				<div class="" style="padding: 10px;">
					<p style="font-weight: 700;">保证金规则：</p>
					<p>&emsp;为了保证匹配成功的交易双方及时完成点对点交易，会员每次挂单交易时，系统会自动冻结挂单额的10%作为交易保证金，当出现交易违约时，扣除违约方10%的违约金，交易成功后会有提示。</p><br />
					<p style="font-weight: 700;">交易时限：</p>
					<p>&emsp;系统自动匹配成功后，会在第一时间之内，给买卖双方发送通知短信； 系统自动匹配成功后，即开始计算交易时限； 交易时限为4小时，超出时限后没有完成交易确认的，视为违约； 因不可抗拒力造成的特殊情况，可以申诉平台客服介入处理；
					</p><br />
					<p style="font-weight: 700;">买方权利和义务：</p>
					<p>&emsp;买方要在规定的时间内确认付款，并在用户中心交易列表中点击已付款按钮； 及时将付款凭证发送给卖家； 不得故意延迟付款或撤销订单；
					</p><br />
					<p style="font-weight: 700;">卖方权利和义务：</p>
					<p>&emsp;卖家要在规定时间内确认收款并放行货币； 及时在用户中心交易列表中点击放币按钮； 超出时限，扣除违约方保证金，交易时请严格按照要求进行交易，以免违约，被扣违约金。
					</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import router from './../../router';
	import util from './../../js/util/util.js';
	import vHeader from './../common/Header.vue';
	import { Navbar, TabItem, Toast, Loadmore } from 'mint-ui';
	let interval;
	export default {
		data() {
			return {
				time: 60, // 发送验证码倒计时
				sendMsgDisabled: false,
				showIndex: 0, //默认第一个tab为激活状态
				showTabsParam: [{'name': '买入KBC'}, {'name': '卖出KBC'}, {'name': '最新委托'}, {'name': '规则'}], 
				Page: 1,
				type: 1,
				isShow: false,
				sellEntityList:[],//最新委托卖入
				buyEntityList:[],//最新委托买入
				currentKbcPrice:'0',//当前KBC量
				currentPrice:'0',//当前价格
				tradeBuy:'0.00', //买入KBC-交易额
				tradeSell:'0.00',//卖出KBC-交易额
				sellNum:'',
				sellUnit:'',
				buyNum:'',
				buyUnit:'',
				verifyCode:'',
				phoneNum:'',
				currentPage: '0',
				totalPage: '0'

			};
		},
		components: { // 声明子组件
			Navbar,
			TabItem,
			Toast,
			Loadmore,
			vHeader
		},
		methods: {
			buyKBC: function(){ //买入输入时计算
				if (!util.isEmpty(this.buyNum)) {
					this.tradeBuy = Number(this.buyNum);
				} else if(!util.isEmpty(this.buyUnit)) {
					this.tradeBuy = Number(this.buyUnit);
				}
				if(!util.isEmpty(this.buyNum)&&!util.isEmpty(this.buyUnit)){
					this.tradeBuy = (Number(this.buyNum)*Number(this.buyUnit)).toFixed(2);
				}
					
			},
			sellKBC: function(){ //卖出输入时计算
				if (!util.isEmpty(this.sellNum)) {
					this.tradeSell = Number(this.sellNum);
				} else if(!util.isEmpty(this.sellUnit)) {
					this.tradeSell = Number(this.sellUnit);
				}
				if(!util.isEmpty(this.sellNum)&&!util.isEmpty(this.sellUnit)){
					this.tradeSell = (Number(this.sellNum)*Number(this.sellUnit)).toFixed(2);
				}
					
			},
			go: function(url,data){
				util.pushRouter(router, url, {"item":data,"type":1});
			},
			showToggleTabs: function(index) { //切换买入/卖出 tab
				this.showIndex = index;
				if(index !=3){
					this.getInitData();
				}
			},
			getInitData: function() { //获取买卖初始值
				let $this = this;
				util.Ajax('/kbc/trade/tradeBuyOrSellJson', "GET", {}, function(data) { //成功
					if(data) {
						if(data.code == "0") {
							$this.sellEntityList = data.SellEntityList;//最新委托卖入
							$this.buyEntityList = data.BuyEntityList;//最新委托买入
							$this.currentKbcPrice = data.currentKbcPrice;//当前KBC量
							$this.currentPrice = data.currentPrice;//当前价格
							if(data.SellEntityList.length == 0&&data.BuyEntityList.length == 0)$this.isShow = true;
						}
					}
				});
			},
			submitSell: function() { //卖出KBC
				let $this = this;
				let sellNum = this.sellNum;
				let sellUnit = this.sellUnit;
				let verifyCode = this.verifyCode;
				if(!sellNum || sellNum.length == 0) {
					this.$toast('请输入卖出KBC数量！')
					return false;
				}
				var num = Number(sellNum);
			 	if(num % 10 != 0){
			 		this.$toast('输入购买币数需为10的整数倍！')
					return false;
			 	}
				if(!sellUnit || sellUnit.length == 0) {
					this.$toast('请输入卖出KBC单价！')
					return false;
				}
				if(!verifyCode || verifyCode.length < 4) {
					this.$toast('请输入正确的六位数验证码！')
					return false;
				}
				util.Ajax('/kbc/trade/toTradeSell', "GET",{
					"sellKbcInput": sellNum, 
					"sellKbcPriceInput": sellUnit,
					"sellKbcSms": verifyCode
				}, function(data) { //成功
					if(data) {
						if(data.code == "0") {
							Toast(data.message);
							//刷新数据
							$this.refreshData();
						} else {
							Toast(data.msg);
						}
					}
				})
			},
			submitBuy: function() { //买入KBC
				let $this = this;
				let buyNum = this.buyNum;
				let buyUnit = this.buyUnit;
				let verifyCode = this.verifyCode;
				if(!buyNum || buyNum.length == 0) {
					this.$toast('请输入买入KBC数量！')
					return false;
				}
				var num = Number(buyNum);
			 	if(num % 10 != 0){
			 		this.$toast('输入购买币数需为10的整数倍！')
					return false;
			 	}
				if(!buyUnit || buyUnit.length == 0) {
					this.$toast('请输入买入KBC单价！')
					return false;
				}
				if(!verifyCode || verifyCode.length < 4) {
					this.$toast('请输入正确的六位数验证码！')
					return false;
				}
				util.Ajax('/kbc/trade/toTradeBuy', "GET",{
					"buyKbcInput": buyNum, 
					"buyKbcPriceInput": buyUnit,
					"buyKbcSms": verifyCode
				}, function(data) { //成功
					if(data) {
						if(data.code == "0") {
							$this.refreshData();
							Toast(data.message);
						} else {
							Toast(data.msg);
						}
					}
				})
			},
			refreshData: function(){
				//初始化买入数据
				this.buyNum = '';
				this.buyUnit = '';
				this.verifyCode = '';
				this.tradeBuy = '0.00'; //买入KBC-交易额
				this.tradeSell = '0.00';//卖出KBC-交易额
				//初始化卖出数据
				this.sellNum = '';
				this.sellUnit = '';
				this.verifyCode = '';
				this.time = 60;
				this.sendMsgDisabled = false;
				window.clearInterval(interval);
				//刷新数据
				this.getInitData();
			},
			send: function(type) { //发送短信
				let me = this;
				let sellNum = this.sellNum;
				let sellUnit = this.sellUnit;
				let buyNum = this.buyNum;
				let buyUnit = this.buyUnit;
				if (type == 'sell') {//卖
					if(!sellNum || sellNum.length == 0) {
					this.$toast('请输入卖出KBC数量！')
					return false;
					}
					var num = Number(sellNum);
				 	if(num % 10 != 0){
				 		this.$toast('输入购买币数需为10的整数倍！')
						return false;
				 	}
					if(!sellUnit || sellUnit.length == 0) {
						this.$toast('请输入卖出KBC单价！')
						return false;
					}
				} else{
					if(!buyNum || buyNum.length == 0) {
					this.$toast('请输入买入KBC数量！')
					return false;
					}
					var num = Number(buyNum);
				 	if(num % 10 != 0){
				 		this.$toast('输入购买币数需为10的整数倍！')
						return false;
				 	}
					if(!buyUnit || buyUnit.length == 0) {
						this.$toast('请输入买入KBC单价！')
						return false;
					}
				}
				me.sendMsgDisabled = true;
				interval = window.setInterval(function() {
					if((me.time--) <= 0) {
						me.time = 60;
						me.sendMsgDisabled = false;
						window.clearInterval(interval);
					}
				}, 1000);
				
				var ajax = util.createAJAX();  
				var method = "POST";  
				var url = '/sms/sendMsg?'; 
				ajax.open(method,url); 
				ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");  
				var content = 'phone='+me.phoneNum; 
//				var content = 'phone=18798798586'; 
				ajax.send(content);  
				ajax.onreadystatechange = function () {  
				    if(ajax.readyState == 4){  
				        if (ajax.status == 200){  
				            var tip = eval('('+ajax.responseText+')'); 
				            if(tip.code==404){
				            	Toast(tip.msg);
				            }
				        }  
				    }  
				}  
			}
		},
		created() {
			this.$store.state.headings = this.$router.history.current.name; //修改标题
			this.$store.state.isFooterShow = true; //显示底部导航
			this.$store.state.flag = 1;
		},
		mounted: function() {
			let $this = this;
			this.getInitData();
			
			util.Ajax('/userCentered/getMemeberById', "POST",{},function(data) { //成功
				if(data) {
					if(data.code == "0") {
						$this.phoneNum = data.member.phone;
					} else {
						Toast(data.msg);
					}
				}
			})
		}
	}
</script>

<style>
	.showBuy {
		margin-top: 4rem;
	}
	
	.showBuy .tabs-show-bar {
		border-bottom: 1px solid #CECECE;
		position: fixed;
		width: 100%;
		height: 45px;
		z-index: 999;
		background: #FFFFFF;
	}
	
	.showBuy .tabs-show-bar .tabs-show-bar-nav {
		display:table; 
		min-height: 45px;
		width: 100%;
		position: absolute;
	}
	
	.showBuy .tabs-show-bar .tabs-show-bar-nav .tabs-show-tab {
		width: 25%;
		vertical-align:middle;   
  		display:table-cell;
		font-size: 1.2rem;
		position: relative;
		box-sizing: border-box;
		text-align: center;
		min-height: 45px;
		cursor: pointer;
		-moz-box-flex: 1;
		-webkit-flex: 1;
		-ms-flex: 1;
		flex: 1;
	}
	
	.showBuy .tabs-show-bar .tabs-show-bar-nav .tabs-show-active {
		font-size: 1.2rem;
		border-bottom: 1px solid #007AFF;
		color: #007AFF;
	}
	
	.showBuy .tabs-show-content {
		width: 100%;
		padding: 5px 5px;
		box-sizing: border-box;
		background: #fff;
	}
	
	.showBuy .tabs-show-content .divShowTab .price-title{
	  -webkit-box-sizing: border-box;
	  box-sizing: border-box;
	  display: flex;
	  line-height: 1;
	  min-height: inherit;
	  overflow: hidden;
	  padding: 10px 10px;
	  width: 100%;
	  }
	.showBuy .tabs-show-content .divShowTab .price-title p{
		font-size: 1.3rem;
	}
	.showBuy .tabs-show-content .divShowTab .price-title span{
		font-size: 1.3rem;-moz-box-flex: 1;
		-webkit-flex: 1;
		-ms-flex: 1;
		flex: 1;
	}
	.showBuy .tabs-show-content .divShowTab {
		margin-top: 4rem;
	}
	.showBuy .tabs-show-content .divShowTab .table-box li{
		width: 100%;
		text-align: center;
	  -webkit-box-sizing: border-box;
	  box-sizing: border-box;
	  display: flex;
	  line-height: 45px;border-bottom: 1px solid #E7E1CD;height: 45px;
	}
	.showBuy .tabs-show-content .divShowTab .table-box li span{
		width: 33.333%;
		font-size: 1.3rem;
		-moz-box-flex: 1;
		-webkit-flex: 1;
		-ms-flex: 1;
		flex: 1;
	}
	.showBuy .tabs-show-content .divShowTab p {
		font-size: 1.2rem;
	}
	.showBuy .button-box{margin-top:20px;}
	.showBuy .mint-button {font-size: 1.3rem;}
    .showBuy .button-box .mint-button--primary {background-color:#30B04E;}
</style>